<template>
	<view class="detection_wrap" v-if="value">
		<view class="detection_box">
			<view class="detection_main">
				<view class="image_box">
					<view v-if="testing" class="gif">
						<image v-if="isHeart" src="http://qiniu.relaverse.cn/icon/heartRate.gif"></image>
						<image v-if="isBlood" src="http://qiniu.relaverse.cn/icon/oxygen.gif"></image>
					</view>
					<view v-else class="img">
						<image v-if="isHeart" src="@/static/ring/detection/heartRate.png"></image>
						<image v-if="isBlood" src="@/static/ring/detection/oxygen.png"></image>

						<view class="value">
							<view v-if="isHeart && heartValue" class="text_value">{{ heartValue }} <text>/min</text></view>
							<view v-if="isBlood && bloodValue" class="text_value">{{ bloodValue }}<text>%</text></view>
						</view>
					</view>
				</view>
				<view v-if="!testFinish" class="progress-box">
					<progress :percent="progress" activeColor="#10AEFF" stroke-width="1" />
				</view>
				<view class="text_box">
					{{ isHeart ? "心率" : "血氧" }}
					<view>{{ testDesc }}</view>
				</view>
			</view>
			<view v-if="testFinish && (heartValue || bloodValue)" class="detection_button" @click="close">完成</view>
			<view v-else class="detection_button" @click="stop">取消</view>
		</view>
	</view>
</template>
<script>
import store from "@/store/index.js";
import { mapGetters } from "vuex";
import { BLUETOOTH_STATUS } from "@/store/BluetoothManager.js";

export default {
	props: {
		value: Boolean,
		type: String,
	},
	data() {
		return {
			testing: true,

			testDesc: "采集中...",
			progress: 0,

			heartValue: 0,
			hrvValue: 0,
			bloodValue: 0,
		};
	},

	computed: {
		...mapGetters("bleManage", ["bluetoothState", "linkComplete"]),

		isHeart() {
			return this.type === "heartRate";
		},

		isBlood() {
			return this.type === "blood";
		},

		heartRate() {
			return store.state.ringDataManage.heartRate;
		},

		blood() {
			return store.state.ringDataManage.bloodOxygen;
		},

		isConnected() {
			return this.linkComplete && this.bluetoothState === BLUETOOTH_STATUS.CONNECTED;
		},

		testFinish() {
			return this.progress === 100;
		},
	},

	watch: {
		value() {
			if (this.value) {
				this.testing = true;
				this.testDesc = "采集中...";
				this.heartValue = 0;
				this.hrvValue = 0;
				this.bloodValue = 0;
				this.progress = 0;

				if (this.isConnected && this.isHeart) {
					store.dispatch("ringDataManage/testHeart");
				}

				if (this.isConnected && this.isBlood) {
					store.dispatch("ringDataManage/testBlood");
				}
			}
		},
		heartRate: {
			handler(nv) {
				const { wear, wearDescription, heartRate, hrv, progress, finish = false } = nv;
				
				if (wear !== 3) {
					this.testDesc = wearDescription;
				} else if (wear === 3) {
					this.testDesc = wearDescription + "...";
				}
				this.progress = progress;
				this.heartValue = heartRate;
				this.hrvValue = hrv;

				if (wear === 0) {
					progress === 100;
					this.testing = false;
				}

				if (progress === 100) {
					// 测试完成
					this.testing = false;
					this.testDesc = "采集完成";

					if (this.heartValue === 0) {
						this.testDesc = "采集失败";
					}
				}

				if (finish) {
					console.log("终止测量心率");
				}
			},
			deep: true,
		},

		blood: {
			handler(nv) {
				const { wear, wearDescription, bloodOxygen, progress, finish = false } = nv;
				console.log("bloodValue test", wear, wearDescription, bloodOxygen, progress, finish);
				if (wear !== 3) {
					this.testDesc = wearDescription;
				} else if (wear === 3) {
					this.testDesc = wearDescription + "...";
				}
				this.progress = progress;
				this.bloodValue = bloodOxygen;

				if (wear === 0) {
					progress === 100;
					this.testing = false;
				}

				if (progress === 100) {
					// 测试完成
					this.testing = false;
					this.testDesc = "采集完成";

					if (this.bloodValue === 0) {
						this.testDesc = "采集失败";
					}
				}

				if (finish) {
					console.log("终止测量心率");
				}
			},
			deep: true,
		},
	},

	methods: {
		close() {
			this.$emit("input", false);
		},

		stop() {
			// if (this.isConnected && this.isHeart) {
			// 	store.dispatch("ringDataManage/stopTestHeart");
			// }

			// if (this.isConnected && this.isBlood) {
			// 	store.dispatch("ringDataManage/stopTestBlood");
			// }
			this.close();
		},
	},
};
</script>
<style lang="scss" scoped>
.detection_wrap {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba($color: #000000, $alpha: 0.6);

	display: flex;
	justify-content: center;
	align-items: center;

	.detection_box {
		width: 580rpx;
		height: 780rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;

		.detection_main {
			width: 100%;
			height: 644rpx;
			background: linear-gradient(180deg, #b9e8ff 0%, #ffffff 100%);
			border-radius: 30rpx;

			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.image_box {
				width: 500rpx;
				height: 500rpx;
				overflow: hidden;
				border-radius: 20rpx;

				.gif {
					width: 100%;
					height: 100%;
				}
				.img {
					width: 100%;
					height: 100%;
					position: relative;
					.value {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;

						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;

						.text_value {
							font-weight: bold;
							font-size: 120rpx;
							color: #ff5858;

							text {
								font-size: 48rpx;
							}
						}
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.progress-box {
				width: 500rpx;
				height: 10rpx;
			}

			.text_box {
				width: 500rpx;
				height: 44rpx;
				line-height: 44rpx;
				color: black;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 20rpx;

				font-size: 32rpx;

				view {
					margin-left: auto;
					font-size: 24rpx;
					color: rgba($color: #000000, $alpha: 0.6);
				}
			}
		}
		.detection_button {
			width: 100%;
			height: 96rpx;

			line-height: 96rpx;
			font-size: 40rpx;
			font-weight: bold;

			color: #2d99ff;
			border: 1px solid #2d99ff;
			border-radius: 48rpx;
			text-align: center;
			background-color: #fff;
			margin-top: 40rpx;
		}
	}
}
</style>
